<template>
	<view>
		<view class="qie_ul_box">
		<view class="qie_ul">
			<view :class="[ showclass ? 'qie_li qie_li_active' : 'qie_li']" @tap="showone()">
				商品
			</view>
			<view :class="[ showclass2 ? 'qie_li qie_li_active' : 'qie_li']" @tap="showtwo()">
				详情
			</view>
			<view :class="[ showclass3 ? 'qie_li qie_li_active' : 'qie_li']" @tap="showtree()">
				评价
			</view>
		</view>
		</view>
		
		<!-- 商品板块start -->
		<view class="shang" v-if="one">
		<!-- 顶部轮播start -->
				<view class="banner">
		<view class="uni-padding-wrap">
		     <view class="page-section swiper">
		         <view class="page-section-spacing">
		             <swiper class="swiper" autoplay="true" indicator-dots="true" indicator-color="#fff" indicator-active-color="rgb(255, 128, 192)" circular="true">
		                 <swiper-item>
									<navigator url=" " class="banner_a" hover-class="none">
		                    <image src="http://wx.crh2009.com/attachment/images/2/2020/03/Iz2r7x7sR22q6XnvYiSs6UNlsY776t.jpg"></image>
								   </navigator>
		                 </swiper-item>
		                 <swiper-item>
									<navigator url="" class="banner_a" hover-class="none">
		                      <image src="http://wx.crh2009.com/attachment/images/2/2020/02/YpP8uz90557P5l2ply69tUl05Mh69p.jpg"></image>
									 </navigator>
		                 </swiper-item>
		                 <swiper-item>
									<navigator url="" class="banner_a" hover-class="none">
		                    <image src="http://wx.crh2009.com/attachment/images/2/2020/02/En2RRItI07RCZn0hvDqR7DdC9Crr7R.jpg"></image>
								   </navigator>
		                 </swiper-item>
		             </swiper>
		         </view>
		     </view>
		 </view>
				</view>
				<!-- 顶部轮播end -->
				<view class="title">
					{{shoptit}}
				</view>
				<view class="title_asd">
					{{shopasd}}
				</view>
				<view class="slik">
					<view class="slik_left">
						<view class="money">¥ 
						<view class="mon">89.00
						</view>
						</view>
						<view class="money_old">¥
						<view>189.00
						</view>
						</view>
					</view>
					<view class="slik_right">
						<view class="slik_view">
							<view class="slik_view_left"> 赚</view>
							<view class="slik_view_right">¥1.02</view>
						</view>
					</view>
				</view>
				<view class="kuaidi">快递：包邮 </view>
				
				<view class="slk_btnbox">
					<text class="slk_btn" @tap="openshare">我要分享</text>
					<text class="slk_btn slk_btn2">我要评价</text>
				</view>
				
				<view class="shang_smasd">
					<view class="sm_asdbox">
						<view class="smbox">
						<image src="../../static/zheng.png" class="smasd_img" mode="widthFix"></image>
						正品保证
						</view>
					</view>
				</view>
				
				<view class="kong"></view>
				<view class="nosong" @tap="opentan()">
					<view class="nosong_left">
						不配送区域:
						<text v-for="(noad,index) in noadress">{{noad+' '}}</text>
					</view>
					<view class="nosong_right">
						<image src="../../static/rightimg.png" class="right_img" mode="widthFix"></image>
					</view>
				</view>
				
				<!-- 不配送地区弹窗start -->
				<uni-popup ref="popup1" type="bottom" style="z-index:9999">
					<view class="popup1">
						<view class="popup1_tit">
							不配送区域
						</view>
						<view class="noad_ul">
							<view class="noad_li" v-for="(noad,index) in noadress">
								{{noad}}
							</view>
						</view>
						<view class="popup1_btn" @tap="closetan()">确定</view>
					</view>
					</uni-popup>
				<!-- 不配送地区弹窗end -->
				<view class="kong"></view>
				<view class="asd_fei">
					<view class="asd_fei_box">
						<view class="nosong_left">
							抵扣:
							<image src="../../static/ai.png" class="asd_fei_img" mode="widthFix"></image>
							潮人豆可抵13.00元（1潮豆=1元）
						</view>
					</view>
					<view class="asd_fei_box">
						<view class="nosong_left">
							福利:
							<image src="../../static/sh.png" class="asd_fei_img" mode="widthFix"></image>
							<view style="color:red;font-weight: 500;">升级大潮人</view>立享佣金翻倍+潮人补贴
						</view>
						<view class="nosong_right">
							<image src="../../static/rightimg.png" class="right_img" mode="widthFix"></image>
						</view>
					</view>
				</view>
			    <view class="kong"></view>
				<!-- 评价简介start -->
				<view class="ping_box">
					<view class="label_box">
					<view class="label_left">
						评价(18)
					</view>
					<view class="label_right">
						<navigator url="" hover-class="none" class="label_right_a">
						<view class="label_right_a_span" style="color: #ff5555;">95%好评</view>
						<image src="../../static/rightimg.png" class="right_img" mode="widthFix"></image>
						</navigator>
					</view>
					</view>
				<view class="ping_ul">
					<view class="ping_li" v-for="(pingous,index) in pingous.slice(0, 2)" :key="index">
						<view class="ping_li_top">
							<view class="username">{{pingous.username}}</view>
							<view class="ping_li_top_right">
								{{pingous.time}}
							</view>
						</view>
						<view class="ping_li_top_left">
							<!--组件评星 只读状态 -->
							<uni-rate disabled="true" disabledColor="#c0c0c0" max="5" :value="pingous.startvalue" active-color="#ff80c0"/>
						</view>
						<view class="ping_li_bt">{{pingous.asd}}</view>
						<view class="shai_img">
							<image class="shai_img_img" :src="pingous.shaiimg" mode="widthFix" :style="{ 'display' : (pingous.shaiimg) ==='' ? 'none' : 'block' }" @tap="quanimg(index)"></image>
						</view>
					</view>
						<navigator hover-class="none" url="" class="gengping" @tap="openping()">查看全部评价</navigator>
				</view>
	
				</view>
					<!-- 评价简介end -->
				<view class="kong"></view>
				<!-- 小店 start -->
				<view class="xiaodian">
					<view class="xiaodian_left">
						<image src="http://thirdwx.qlogo.cn/mmopen/9kibjKzqKf8H12BxOk7T3UeBIfichjsb0noOibrn3741aZumfU1TvN7bbO7rr81sLguKmb4grCj3vL5hafzECGHmS7YMNDNQp0f/132"
						mode="widthFix" class="tou_img"></image>
					</view>
					<view class="xiaodian_cen">
						<view class="xiaodian_cen_tit">小翠花的潮品商城</view>
						<view class="xiaodian_cen_span">引领"时尚潮流+特价分享",潮人精品、网红美食、超级玩家~尽在潮人荟！</view>
					</view>
					<view class="xiaodian_right">
						<navigator class="xiaodian_right_a" hover-class="none" url="">进店逛逛</navigator>
					</view>
				</view>
				<!-- 小店 end -->
				<view class="kong"></view>
			</view>
			
			<!-- 商品板块end -->
			
			<image src="../../static/hai.png" mode="widthFix" class="hai_img" @tap="openhai"></image>
			<!-- 海报弹窗 start -->
			
					<view class="haib" v-if="ghns">
					<view class="haibao_box">
						<view class="ghsn" @tap="closehaibao">X</view>
						<image  class="haibao" :src="haibaoimg" mode="widthFix" @longtap="cun"></image>
						<view class="haibao_span" @longtap="cun">
							<view style="width:100%;text-align: center;font-size: 23rpx;">长按保</view>
							<view style="width:100%;text-align: center;font-size: 23rpx;margin-top:-35rpx;">存图片</view>
						</view>
						<view class="haibao_box_bt">
							<view class="haibao_box_bt_sm" @tap="openshare">
								<image src="../../static/fuzhi2.png" mode="widthFix" class="ol"></image>
								<view class="haibao_box_bt_sm_tetx">
									分享转发
								</view>
							</view>
							<view class="haibao_box_bt_sm" @tap="getwx()">
								<image src="../../static/fuzhi.png" mode="widthFix" class="ol"></image>
								<view class="haibao_box_bt_sm_tetx">
									复制文案
								</view>
							</view>
						</view>
					</view>
					</view>
				
			<!-- 海报弹窗 end -->
		
			<!-- 商品规格弹窗 start -->
			<uni-popup ref="popup3"  style="z-index:99999;" type="bottom">
				<view class="ge_box">
						<view class="ge_box_tp">
							<image class="ge_box_tp_left" src="http://wx.crh2009.com/attachment/images/2/2020/09/CBt8hB52k5BRvHKsLHSgSZK66cSgtb.jpg" mode="widthFix"></image>
							<view class="ge_box_tp_right">
								<view class="ge_box_tp_right_tit">¥13.40~19.20</view>
								<view class="ge_box_tp_right_text">
								{{shoptext}}
								</view>
							</view>
							<text class="closege" @tap="closege">X</text>
						</view>
						<view class="ge_label">规格</view>
						<view class="guigeul">
							<view :class="guigeli_active ==index ? 'guigeli_active guigeli' :'guigeli'" v-for="(ge,index) in ge" :key="index" @tap="changege(index)">{{ge}}</view>
						</view>
						<view class="ge_bt">
							<view class="ge_bt_left">数量</view>
							<view class="ge_bt_right">
								<view class="num_box">
									<view class="num_box_left" @tap="jian">-</view>
									<input type="number" class="num_input" :value="shopnum"/>
									<view class="num_box_right" @tap="jia">+</view>
								</view>
							</view>
						</view>
						<view class="surebtn" @tap="surebtn">确定</view>
				</view>
			</uni-popup>
			<!-- 商品规格弹窗 end -->
			
			<!-- 分享弹窗 -->
			<uni-popup ref="popup6"  style="z-index:999999;" type="bottom">
				<view class="fen_box">
					<view class="fen_ul">
						<view class="fen_li" @tap="sharewxpop">
							<image src="../../static/icon_weixin.png" mode="widthFix"></image>
							<view class="fen_text">微信好友</view>
						</view>
						<view class="fen_li" @tap="sharepeng">
							<image src="../../static/icon_pengyouquan.png" mode="widthFix"></image>
							<view class="fen_text">朋友圈</view>
						</view>
						<view class="fen_li" @tap="shareqq">
							<image src="../../static/icon_qq.png" mode="widthFix"></image>
							<view class="fen_text">QQ</view>
						</view>
					</view>
				</view>
			</uni-popup>
			
			<!-- 详情板块 start -->
			<view class="xiang" v-if="two">
				<image class="xiang_img"  mode="widthFix" src="http://wx.crh2009.com/attachment/images/2/2020/05/uZ884Xx8Bz4vt21Q8q4B15QQ424Q4t.jpg"></image>
				<image class="xiang_img"  mode="widthFix" src="http://cdn1.lianlianlvyou.com/n/test/ba60bcd3f4c23bf748da9d86c548a0fa.gif"></image>
				<image class="xiang_img"  mode="widthFix" src="http://cdn1.lianlianlvyou.com/n/test/f5fb16ebce5a607ff3f3a01fe85d78a9.png"></image>
			</view>
			<!-- 详情板块 end -->
			
			<!-- 评论板块start -->
			<view class="xiang" v-if="tree">
				<view class="ping_qie_ul">
					<view :class="[ ping_qie_li_active==index ? 'ping_qie_li_active ping_qie_li' : 'ping_qie_li']" v-for="(ping,index) in ping_qie_li"  :key="index" @tap="changeping(index)">
						<view class="ping_qie_li_tit">{{ping.tit}}</view>
						<view class="ping_qie_li_num">{{ping.num}}</view>
					</view>
		
				</view>
				<view class="kong"></view>
				<view class="ping_ul">
					<view class="ping_li" v-for="(pingous,index) in pingous" :key="index">
						<view class="ping_li_top">
							<view class="username">{{pingous.username}}</view>
							<view class="ping_li_top_right">
								{{pingous.time}}
							</view>
						</view>
						<view class="ping_li_top_left">
							<!--组件评星 只读状态 -->
							<uni-rate disabled="true" disabledColor="#c0c0c0" max="5" :value="pingous.startvalue" active-color="#ff80c0"/>
						</view>
						<view class="ping_li_bt">{{pingous.asd}}</view>
						<view class="shai_img">
							<image class="shai_img_img" :src="pingous.shaiimg" mode="widthFix" :style="{ 'display' : (pingous.shaiimg) ==='' ? 'none' : 'block' }" @tap="quanimg(index)"></image>
						</view>
					</view>
				</view>
			</view>
			<!-- 评论板块end -->
			
			<!-- 底部购买导航 start -->
			<view class="bt_nav_box">
			<view class="bt_nav">
				<view class="bt_nav_left">
					<navigator url="../member/member" hover-class="none" class="bt_nav_left_a" open-type="switchTab">
						<image src="../../static/fix1.png" class="bt_nav_left_a_img"></image>
						<view class="bt_nav_left_a_span">我的</view>
					</navigator>
					<navigator url="../index/index" hover-class="none" class="bt_nav_left_a" open-type="switchTab">
						<image src="../../static/fix2.png" class="bt_nav_left_a_img"></image>
						<view class="bt_nav_left_a_span">首页</view>
					</navigator>
					<navigator url="" hover-class="none" class="bt_nav_left_a" open-type="switchTab">
						<image src="../../static/fix3.png" class="bt_nav_left_a_img"></image>
						<view class="bt_nav_left_a_span">客服</view>
					</navigator>
					<navigator url="../member/cart" hover-class="none" class="bt_nav_left_a">
						<image src="../../static/fix4.png" class="bt_nav_left_a_img"></image>
						<view class="bt_nav_left_a_span">购物车</view>
					</navigator>
				</view>
				<view class="bt_nav_right">
					<view class="bt_nav_right_left">
						<view class="bt_nav_right_left_sm" @tap="openhai">
						<view class="bt_nav_right_left_tit">分享</view>
						<view class="bt_nav_right_left_span">赚:1元</view>
						</view>
					</view>
					<view class="bt_nav_right_right" @tap="openge">
						立即购买
					</view>
				</view>
			</view>
			</view>
			<!-- 底部购买导航 end -->
			
				<!-- 侧边栏 -->
				<fixce></fixce> 
				<!-- 回到顶部start -->
				<view class="top" :style="{'display':(topState===true? 'block':'none')}">
				<image src="../../static/huitop.png" class="huitop"
				@tap="top()">
				</image>
				</view>
					<!-- 回到顶部end-->
	</view>
</template>

<script>
	import uniPopup from '../../component/uniui/uni-popup/uni-popup.vue'
	import uniPopupMessage from '../../component/uniui/uni-popup/uni-popup-message.vue'
	import uniPopupDialog from '../../component/uniui/uni-popup/uni-popup-dialog.vue'
	import goodslist from '../../component/goodslist.vue';  //商品列表
	import fixce from '../../component/fixce.vue';  //侧边栏组件
	import uniRate from '../../component/uniui/uni-rate/uni-rate.vue';  //评星组件
 //分享组件
	export default{
		components:{
		goodslist,
		fixce,
	    uniPopup,
		uniPopupMessage,
	    uniPopupDialog,
	    uniRate
		},
		data (){
			 return{
				 topState:false,
				 showclass:true,
				 showclass2:false,
				 showclass3:false,
				 shoptit:'【薇娅带货】认养一头牛酸奶或纯牛奶89元=2提（共24支）100%生牛乳，零添加，无防腐剂，浓稠好味，品质好奶，滴滴香醇，女神之选，让家人孩子放心喝牛奶！',//商品标题
				 shopasd:'纯牛奶250ml/瓶，酸奶200g/瓶，酸奶或纯牛奶2提，健康好滋味，让家人孩子放心喝牛奶，就选认养一头牛！', //商品描述
				 one:true,  //商品页
				 two:false, //详情页
				 ghns:false,  //海报弹窗
				 haibaoimg:'http://wx.crh2009.com/addons/ewei_shopv2/data/goodscode/2/3cf319c5679f0156b6138c1cf9eb7332.jpg', //商品海报
				 tree:false, //评论页
				 shopmoney:23,//商品价格
				 shopnum:1, //商品规格数量
				 shoptext:'请选择规格', //商品规格分类简介
				 guigeli_active:0,  //默认商品规格分类
				 ge:['1盒','2盒','3盒','4盒','5盒'],  //商品规格分类
				 ping_qie_li_active:0, //默认全部好评
				 ping_qie_li:[
					 {
						 tit:'全部',
						 num:'2'
					 },
					 {
						tit:'好评',
					 	num:'2'
					 },
					 {
					    tit:'中评',
					 	num:'0'
					 },
					 {
					    tit:'差评',
					 	num:'0'
					 },
					 {
					    tit:'晒图',
					 	num:'0'
					 }
				 ],
				 pingous:[
					 {
						 username:'1用户***',
						 time:'2020-08-09 12:47',
						 startvalue:5,
						 asd:'五星好评，已回购多次，新鲜好喝。',
						 shaiimg:'http://wx.crh2009.com/attachment/images/2/2020/06/l8pTSD4A8aD4dV88NyC7cBbQdlvmPM.jpg'
					 },
					 {
					 						 username:'2用户***',
					 						 time:'2020-08-09 12:47',
					 						 startvalue:3,
					 						 asd:'五星好评，已回购多次，新鲜好喝。',
					 						 shaiimg:''
					 },
						{
										 username:'3用户***',
										 time:'2020-08-09 12:47',
										 startvalue:4,
										 asd:'五星好评，已回购多次，新鲜好喝。',
										 shaiimg:'http://wx.crh2009.com/attachment/images/2/2020/02/YpP8uz90557P5l2ply69tUl05Mh69p.jpg'
				},
				 ],
				 //不配说地区
				 noadress:['呼和浩特市','呼和浩特市','呼和浩特市','内蒙古','呼和浩特市','呼和浩特市','呼和浩特市']
			 }
		},
	// 回到顶部start
		onPageScroll(e){ //根据距离顶部距离是否显示回到顶部按钮
		    if(e.scrollTop>200){ //当距离大于200时显示回到顶部按钮
		        this.topState = true
		    }else{ //当距离小于200时关闭回到顶部按钮
		        this.topState = false
		    }
		},
		// 回到顶部end
		created	(){
			//设置微信号
			uni.setClipboardData({
			    data: this.shoptit, 
			    success: function () {
					uni.hideToast();
			    }
			});
		},
		methods: {
			  opentan(){  //打开不配送地址弹窗
			         this.$refs.popup1.open()
			      },
			  closetan (){//关闭不配送地址弹窗
				  this.$refs.popup1.close();
			  },
			  openhai (){  //打开海报弹窗
				  this.ghns=true;
			  },
			  closehaibao (){   //关闭海报弹窗
				  this.ghns=false;
			  },
			  openge (){  //打开商品规格弹窗
				  this.$refs.popup3.open();
			  },
			  closege (){ //关闭商品规格弹窗
				 this.$refs.popup3.close(); 
			  },
			  changege (index){ //更改商品规格分类  
				 this.guigeli_active=index;
				 this.shoptext='已选:'+this.ge[index];  //更改商品规格分类简介
			  },
			  cun (){  //保存海报
			  		const _this=this;
			  		uni.showModal({
			  		    title: '提示',
			  		    content: '是否保存图片',
			  		    success: function (res) {
			  		        if (res.confirm) {
			  		            uni.saveImageToPhotosAlbum({
			  		            	            filePath: _this.haibaoimg,
			  		            	            success: function () {
			  		            	                console.log('save success');
			  		            	            }
			  		            });
			  					uni.showToast({
			  						title:'已保存'
			  					})
			  		        } else if (res.cancel) {
			  		            console.log('用户点击取消');
			  		        }
			  		    }
			  		});
			  },
			  jian (){  //数量减，
			  	 this.shopnum--;
			  	if(this.shopnum<=0){
			  		this.shopnum=0;
			  	};
			  },
			  jia (){  //数量加，
			  	this.shopnum++;
			  },
			  surebtn (){  //确定订单
			  				 this.$refs.popup3.close();  
							 uni.navigateTo({
							 	url:'../order/create'
							 })
			  },
			  openshare (){  //打开分享弹窗
			  this.$refs.popup6.open();            
			  },
			  sharewxpop (){  //分享微信好友
				  uni.share({
				      provider: "weixin",
				      scene: "WXSceneSession",
				      type: 0,
				      href: "pages/goods/detail",
				      title: this.shoptit,  //标题
				      summary: this.shopasd,  //描述
				      imageUrl: this.haibaoimg,  //图片
				      success: function (res) {
				          uni.showToast({
				          	title:'超哥帅的惊为天人'
				          })
				      },
				      fail: function (err) {
				          console.log("fail:" + JSON.stringify(err));
				      }
				  });	
			  },
			  sharepeng (){ //分享朋友圈
				uni.share({
				    provider: "weixin",
				    scene: "WXSenceTimeline",
				    type: 0,
				    href: "pages/goods/detail",
				    title:this.shoptit,  //标题
				    summary:  this.shopasd,  //描述
				    imageUrl:this.haibaoimg,  //图片
				    success: function (res) {
				       uni.showToast({
				       	title:'超哥帅的惊为天人'
				       })
				    },
				    fail: function (err) {
				        console.log("fail:" + JSON.stringify(err));
				    }
				});
			  },
			  shareqq (){  //分享qq
				  uni.share({
				      provider: "qq",
				      type: 0,
				      href: "pages/goods/detail",
				      title: this.shoptit,  //标题
				      summary: this.shopasd,  //描述
				      imageUrl: this.haibaoimg,  //图片
				      success: function (res) {
				         uni.showToast({
				         	title:'超哥帅的惊为天人'
				         })
				      },
				      fail: function (err) {
				          console.log("fail:" + JSON.stringify(err));
				      }
				  });
			  },
			  getwx (){ //复制文案
			  	uni.getClipboardData({  
			  	    success: function (res) {
			  	        console.log(res.data);
			  			uni.showToast({
			  			    title: '复制成功',
			  			    duration: 2000
			  			});
			  	    }
			  	});
			  },
		quanimg (index){
			    // 预览图片
				const km=this.pingous[index].shaiimg;
				const imgarray=[];
				 imgarray.push(km);
			        uni.previewImage({
						indicator:'none',
			            urls: imgarray
			        });
		},
			top() { //回到顶部
	　　　　uni.pageScrollTo({ 
	　　　　　　scrollTop: 0, duration: 300 
	　　　　}); 
	　　},
	changeping (index){
		this.ping_qie_li_active=index;
		console.log(index);
	},
		showone (){  ////切换到商品页
			this.one=true;
			this.two=false;
			this.tree=false;
			this.showclass=true;
			this.showclass2=false;
			this.showclass3=false;
		},
		showtwo (){ //切换到详情页
			this.one=false;
			this.two=true;
			this.tree=false;
			this.showclass=false;
			this.showclass2=true;
			this.showclass3=false;
		},
		showtree (){  //切换到评论页
			this.one=false;
			this.two=false;
			this.tree=true;
			this.showclass=false;
			this.showclass2=false;
			this.showclass3=true;
		},
		openping (){  //切换到评论页
			this.one=false;
			this.two=false;
			this.tree=true;
			this.showclass=false;
			this.showclass2=false;
			this.showclass3=true;
		}
		}
	}
</script>

<style>
	/* 首页banner */
	.banner uni-swiper{
		width:100%;
		   height: 750rpx;
	}
	.banner_a{
		width: 100%;
		height: 100%;
	}
	.banner uni-image{
		    width: 100%;
			height:100%;
	}
	 .uni-swiper-dots-horizontal{
		width:25rpx!important;
		height:25rpx!important;
	}
	.qie_ul_box{
		height:95rpx;
	}
	.qie_ul{
		width:100%;
		height:95rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #f7f7f7;
		position: fixed;
		top:0;
		z-index: 999;
	}
	.qie_li{
		width:28%;
		padding:20rpx 0;
		text-align: center;
		color:#666;
		font-size:30rpx;
		font-weight: 500;
	}   
	.qie_li_active{
	 color: #ff80c0;
	 border-bottom:4rpx solid #ff80c0;
	}
	.title{
		width:93%;
		margin:20rpx auto 15rpx;
		font-size:30rpx;
	}
	.title_asd{
		color:#999;
		font-size:26rpx;
		width:93%;
		margin:0 auto;
	}
	.slik{
		width:93%;
		margin:20rpx auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.slik_left{
		display: flex;
		align-items: center;
	}
	.money{
		 color: #ff80c0;
		 font-size:38rpx;
		 font-weight: 700;
		 display: flex;
		 align-items: center;
	}
	.mon{
		font-size:40rpx;
		font-weight: 700;
	}
	.money_old{
	color: #C0C0C0;
	 text-decoration: line-through;
	 margin-left:20rpx;
	 display: flex;
	 align-items: center;
	}
	.slik_view{
		display: flex;
		justify-content: space-around;
		align-items: center;
		border: 2rpx solid #ff9404;
		box-shadow: 0 4rpx 10rpx rgba(250,182,0,0.3);
		border-radius: 100rpx;
	}
	.slik_view_left{
		background: linear-gradient(to right, #f0b938 0%,#f09938 100%);
		padding:5rpx 23rpx;
		border-radius: 100rpx;
		color:#fff;
	}
	.slik_view_right{
		 color: #fe9503;
		 padding:5rpx 20rpx;
		 border-radius: 100rpx;
		 font-weight: 500;
		 text-indent: -10rpx;
	}
	.kuaidi{
		color:#999;
		width:93%;
		margin:0 auto;
	}
	.slk_btnbox{
		width:93%;
		margin:20rpx auto;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}
	.slk_btn{
		  padding: 8rpx 20rpx;
		  border-radius: 100rpx;
		   color: #ff80c0;
		   border: 2rpx solid #ff80c0;
	}
	.slk_btn2{
		margin-left:30rpx;
	}
	.shang_smasd{
		width:100%;
		background: #fafafa;
		padding:20rpx 0;
	}
	.sm_asdbox{
		width:93%;
		margin:0 auto;
		display: flex;
		align-items: center;
		flex-wrap:wrap;
	}
	.smbox{
		margin-left:20rpx;
		display: flex;
		align-items: center;
	}
	.smbox:nth-child(1){
		margin-left:0;
	}
	.smasd_img{
		width:40rpx;
		margin-right:5rpx;
	}
	.kong{
		width:100%;
		height:25rpx;
		background-color: rgb(243,243,243);
	}
	.nosong{
		width:93%;
		padding:20rpx 0;
		margin:0 auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.nosong_left{
		width:90%;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.right_img{
		width:35rpx;
	}
	.asd_fei{
		width:93%;
		margin:0 auto;
	}
	.asd_fei_box{
		width:100%;
		border-bottom:2rpx solid #ebebeb;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding:20rpx 0;
	}
	.asd_fei_box:nth-last-child(1){
		border:none;
	}
	.asd_fei_img{
		width:35rpx;
		margin:0 5rpx;
	}
	.asd_fei_box .nosong_left{
		display: flex;
		align-items: center;
	}
	
	/* /*  */ 
	.label_box{
			width:93%;
			margin:0 auto;
			padding:20rpx 0;
			border-bottom: 2rpx solid #ebebeb;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		.label_left{
			display: flex;
			justify-content: flex-end;
			align-items: center;
			font-size:28rpx;
		}
	.label_right_a{
		display: flex;
		justify-content: flex-end;
		align-items: center;
		color:#999;
	}
	.label_box .right_img{
		width:35rpx;
		margin-left:5rpx;
	}
	.ping_ul{
		width:93%;
		margin:0 auto;
		padding-bottom:10rpx;
	}
	.ping_li{
		width:100%;
		padding:20rpx 0;
		border-bottom: 2rpx solid #ebebeb;
	}
	.ping_li:nth-last-child(1){
		border:none;
	}
	.ping_li_top{
		width:100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.ping_li_top_left{
		width:100%;
		display: flex;
		align-items: center;
		margin:8rpx 0 0;
	}
	.uni-icons span{
		font-size:35rpx;
	}
	.username{
		color:#999;
		width:50%;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}
	.ping_li_top_left image{
		width:40rpx;
	}
	.ping_li_top_right{
		color:#999;
		font-size:22rpx;
	}
	.ping_li_bt{
		color:#666;
		margin-top:15rpx;
	}
	.gengping{
		width:220rpx;
		padding:8rpx 0;
		display: flex;
		align-items: center;
		justify-content: space-around;
		border-radius: 100rpx;
		 color: #ff80c0;
		 border: 2rpx solid #ff80c0;
		 margin:30rpx auto;
		 white-space: nowrap;
	}
	.xiaodian{
		width:93%;
		margin:0 auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding:20rpx 0;
	}
	.xiaodian_left{
		width:20%;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	.tou_img{
		width:90rpx;
	}
	.xiaodian_cen{
		width:60%;
	}
	.xiaodian_cen_tit{
		width:100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-size:28rpx;
	}
	.xiaodian_cen_span{
		width:100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		color:#999;
		font-size:24rpx;
	}
	.xiaodian_right{
		width:20%;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}
	.xiaodian_right_a{
		padding:6rpx 0;
		width:130rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		border-radius: 100rpx;
		 color: #ff80c0;
		 border: 2rpx solid #ff80c0;
		 white-space: nowrap;
	}
	.bt_nav_box{
		height:110rpx;
	}
	.bt_nav{
		width:100%;
		height:110rpx;
		position: fixed;
		bottom:0;
		z-index: 999;
		background-color: #fff;
		box-shadow: 0 0 8rpx rgba(0,0,0,0.1);
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.bt_nav_left{
		width:55%;
		height:100%;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	.bt_nav_left_a{
		widtrh:25%;
		display: flex;
		flex-wrap:wrap;
		justify-content: space-around;
		align-items: center;
	}
	.bt_nav_left_a_img{
		width:55rpx;
		height:55rpx;
	}
	.bt_nav_left_a_span{
		width:100%;
		text-align: center;
		color:#666;
		font-size: 22rpx;
	}
	.bt_nav_right{
		width:45%;
		height:100%;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	.bt_nav_right_left{
		width:45%;
		height:100%;
		color:#fff;
		background-color: #fdb450;
		display: flex;
		flex-wrap:wrap;
		justify-content: space-around;
		align-items: center;
	}
	.bt_nav_right_left_sm{
		width:100%;
		height:75%;
		display: flex;
		flex-wrap:wrap;
		justify-content: space-around;
		align-items: center;
		font-size:35rpx;
	}
	.bt_nav_right_left_span{
		width:100%;
		text-align: center;
		font-size:28rpx;
	}
	.bt_nav_right_right{
		width:55%;
		height:100%;
		color:#fff;
		background-color: #ff80c0;
		font-size:28rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	.fixce_a{
			bottom:210rpx!important;
	}
	.huitop{
			bottom:130rpx;
	}
	.xiang_img{
		width:100%;
	}
	.ping_qie_ul{
		display: flex;
		justify-content: space-around;
		align-items: center;
		padding:20rpx 0;
	}
	.ping_qie_li{
		width:20%;
		text-align: center;
		color:#666;
	}
	.ping_qie_li_active{
		color: #ff80c0;
	}
	.ping_qie_li_tit{
		font-size:28rpx;
		font-weight: 500;
	}
	.ping_qie_li_num{
		text-align: center;
		font-weight: 500;
	}
	.shai_img_img{
		width:140rpx;
		margin-top:15rpx;
	}
	.popup1{
		width:100%;
		height: 700rpx;
		background-color: #fff;
		overflow-y: auto;
		padding-top:0rpx;
	}
	.popup1_btn{
		width:100%;
		height:80rpx;
		background-color: #ff80c0;
		color:#fff;
		display: flex;
		justify-content: space-around;
		align-items:center;
		position: fixed;
		bottom:0;
		font-size:32rpx;
	}
	.popup1_tit{
		width:100%;
		margin:0rpx 0 30rpx 0;
		text-align: center;
		font-size:30rpx;
		font-weight: 500;
		margin-top:30rpx;
	}
	.noad_ul{
		width:90%;
		margin:0 auto;
		display: flex;
		flex-wrap:wrap;
		justify-content: flex-start;
		align-items: flex-start;
	}
	.noad_li{
		  border: 2rpx solid #ebebeb;
		  padding:5rpx 15rpx;
		  margin:15rpx  0 0 15rpx;
		  border-radius: 4rpx;
	}
	
	/* 海报 */
	.hai_img{
		width:110rpx;
		position: fixed;
		right:20rpx;
		top:180rpx;
		z-index: 999;
	}
	
	.haib{
		width:100%;
		height:100vh;
		display:flex;
		align-items: center;
		justify-content: space-around;
		background-color: rgba(0,0,0,0.5);
		position: fixed;
		top:0;
		z-index:999998;
	}
	.ghsn{
		border:3rpx solid #666;
		border-radius: 100rpx;
		width:60rpx;
		height:60rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		font-size:35rpx;
		font-weight:500;
		position: absolute;
		right:8rpx;
		top:0;
		z-index:999998;
	}
	.haibao_box{
		width:80vw;
		border-radius: 50rpx;
		position: relative;
	}
	.haibao{
		width:100%;
		border-radius: 50rpx 50rpx 0 0;
	}
	.haibao_span{
		    position: absolute;
		    width: 100rpx;
		    text-align: center;
		    align-items: center;
		    color: #fff;
		    bottom: 195rpx;
		    right: 20rpx;
		    font-size: 23rpx;
		    display: flex;
			flex-wrap:wrap;
		    background: rgb(255,121,102);
		    border-radius: 100rpx;
		    height: 100rpx;
	}
	.haibao_box_bt{
		    width: 100%;
		    background: linear-gradient(to right, #f9d684 0%,#e88aba 100%);
		    border-radius: 0 0 50rpx 50rpx;
			padding:15rpx 0;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top:-10rpx;
	}
	.haibao_box_bt_sm{
		width:30%;
		text-align: center;
		height:100%;
	}
	.ol{
		width:80rpx;
	}
	.haibao_box_bt_sm_tetx{
		width:100%;
		text-align: center;
		font-size:22rpx;
	}
	
	/* 商品规格 */
	.ge_box{
		width:100%;
		background-color: #fff;
	}
	.ge_box_tp{
		width:90%;
		margin:0 auto;
		position: relative;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding:20rpx 0;
		border-bottom:2rpx solid #eee;
	}
	.ge_box_tp_left{
		width:180rpx;
		border-radius: 10rpx;
		border:4rpx solid #eee;
		margin-top:-80rpx;
	}
	.ge_box_tp_right{
		margin-left:30rpx;
	}
	.ge_box_tp_right_tit{
	    color: #ff80c0;
		font-size:35rpx;
		font-weight: 500;;
	}
	.ge_box_tp_right_text{
		margin-top:8rpx;
	}
	.closege{
		color:#999;
		border-radius: 100rpx;
		display: inline-block;
		width:50rpx;
		height:50rpx;
		border:2rpx solid #999;
		display: flex;
		justify-content: space-around;
		align-items:center;
		font-size:28rpx;
		position: absolute;
		right:0;
		top:15rpx;
	}
	.ge_label{
		width:100%;
		margin:20rpx auto;
		width:90%;
		font-size:28rpx;
		font-weight: 500;
	}
	.guigeul{
	margin:0 auto;
	width:95%;	
	margin-top:-15rpx;
	padding-bottom:20rpx;
	border-bottom:2rpx solid #eee;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	}
	.guigeli{
		margin:20rpx 0 0 20rpx;
		background-color: #e4e4e4;
		padding:7rpx 25rpx;
		border-radius: 10rpx;
	}
	.guigeli_active{
		background-color: #ff80c0;
		color:#fff;
	}
	.ge_bt{
		width:90%;
		margin:0 auto;
		padding:25rpx 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.ge_bt_left{
		font-size:28rpx;
		font-weight: 500;
		color:#666;
	}
	.num_box{
		width:200rpx;
		height:60rpx;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		border: 2rpx solid #d9d9d9;
	}
	.num_box_left,.num_box_right{
		width:30%;
		height:100%;
		display: flex;
		align-items: center;
		justify-content: space-around;
		font-size: 30rpx;
	}
	.num_box_left{
		border-right:2rpx solid #d9d9d9;
	}
	.num_box_right{
		border-left:2rpx solid #d9d9d9;
	}
	.num_input{
		text-align: center;
		width:40%;
	}
	.surebtn{
		width:100%;
		background: #ff80c0;
		color:#fff;
		font-size:33rpx;
		text-align: center;
		padding:25rpx 0;
		margin-top:200rpx;
	}
	.fen_box{
		width:100%;
		background-color: #fff;
		padding:25rpx 0;
	}
	.fen_ul{
		width:90%;
		margin:0 auto;
		display: flex;
		flex-wrap:wrap;
		justify-content: flex-start;
		align-items: center;
		margin-top:-10rpx;
	}
	.fen_li{
		width:25%;
		text-align: center;
		margin-top:15rpx;
	}
	.fen_li image{
		width:100rpx;
	}
	.fen_text{
		width:100%;
		text-align: center;
	}
</style>
